<template>
<div class="vFormContainer">
    <div class="vFormHeader rightPosition">
      <el-button type="primary" @click="saveFormData">保存</el-button>
      <el-button @click="cancelForm">取消</el-button>
  </div>
  
    <div class="vFormHeader leftPosition">
      <i class="el-icon-menu formLogo"></i>
      <span>表单设计器</span>
    </div>

  
  <v-form-designer class="vFormDesigner" ref="vFormDesigner" :designer-config="designerConfig">
  </v-form-designer>
</div>
</template>

<script>
import { updateVForm, getFormData } from "@/api/vForm.js"
export default {
  name: "vform",
  components:{
  },
  data () {
    return {
      designerConfig:{
        //是否显示语言切换菜单
        languageMenu: false,

        //是否显示GitHub、文档等外部链接
        externalLink: false,
        generateSFCButton: false,
        exportCodeButton: false,
        resetFormJson: true,
      },
      appId: '',
      groupId: '',
      worksheetId: '',
      worksheetName: ''
    }
  },
  async mounted () {
    this.appId = this.$route.params.appId
    this.groupId = this.$route.params.groupId
    this.worksheetId = this.$route.params.worksheetId
    let result = await getFormData({id: this.worksheetId})
    if(result){
        this.tableName = result.name
        if('config' in result){
            let config = JSON.parse(result.config);
            this.$refs.vFormDesigner.setFormJson(config)
        }
    }
  },
  methods: {
    async saveFormData(){
      let saveObj = this.$refs.vFormDesigner.getFormJson()
      let params = {
        name: this.worksheetName,
        id: this.worksheetId,
        appId: this.appId,
        groupId: this.groupId,
        config: JSON.stringify(saveObj),
        type: 0
      }
      let result = await updateVForm(params)
      if(result){
        this.$router.push(`/app/${this.appId}/${this.groupId}/${this.worksheetId}`)
      }
    },
    cancelForm(){
      this.$router.go(-1);
    }
  }
}
</script>
<style lang="less">
@import "../../assets/style/application.less";
.vFormContainer{
  height: 100%;
  position: relative;
  // padding-top: 10px;
  background: #fff;
}
.vFormContainer .el-header.main-header{
  // display: none;
}
.vFormHeader{
  position: absolute;
  display: flex;
  align-items: center;
  height: 48px;
  line-height: 48px;
}
.vFormHeader .formLogo{
  font-size: 40px;
  color: #409eff;

}
.rightPosition{
  right: 50px;
}
.leftPosition{
  left: 20px;
}
.leftPosition>span{
  margin-left: 10px;
  font-size: 28px;
  font-weight: 900;
}
.vFormDesigner .el-collapse-item__wrap{
  background-color: unset
}

.vFormDesigner .el-form-item__label{
  color: #859094 !important;
  padding-left: unset !important;
}

.vFormContainer .el-header.main-header div.main-title{
  display: none;
}
.vFormContainer .el-dialog .el-slider__runway, .vFormContainer .el-dialog input:not(.vjmap-map-draw_ctrl-draw-btn), .vFormContainer .el-dialog textarea, .vFormContainer .el-slider__runway, .vFormContainer .el-switch__core, .vFormContainer input, .vFormContainer textarea{
  color: #333 !important;
}
.vFormContainer .el-dialog__header, .vFormContainer .el-dialog__body, .vFormContainer .el-dialog__footer{
    background: #fff;
}

.vFormContainer .el-dialog__header .el-dialog__title, .vFormContainer .el-dialog__body .el-form-item__label{
    color: #333333 !important;
}
.vFormContainer .el-dialog input:not(.vjmap-map-draw_ctrl-draw-btn){
    color: #333333 !important;
}
.vFormContainer .el-tabs__item{
  color: #333;
}
.vFormContainer .el-tabs__item:hover {
    color: #409EFF;
}
.vFormContainer .el-tabs__item.is-active{
    color: #409EFF;
}
.vFormContainer .el-collapse-item__header.is-active{
  // color: #303133
}
.vFormContainer .el-collapse-item__header{
  border-color: #ebeef5;
  padding-left: unset;
}
.vFormContainer .toolbar-header{
  overflow: hidden;
}
.vFormContainer .el-tabs{
  width: 100%;
}

.el-select-dropdown{
  background: #fff;
}
.el-select-dropdown__item{
  color: #333;
}
.el-switch.is-checked .el-switch__core:after{
  background-color: #fff;
}
.el-switch__core:after{
  background-color: rgba(0,0,0,0.2);
}

.vFormContainer .el-form-item__label, .vFormContainer  .el-dialog .el-form-item__label{
    padding-left: unset
}

.vFormContainer .el-form-item__label{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.vFormContainer .el-dialog .mapPartition input:not(.vjmap-map-draw_ctrl-draw-btn){
    background-color: #fff !important;
}
.cgsVformPopupContent .cgsvjmap_row input.inputValueCol,.cgsVformPopupContent .cgsvjmap_row input.inputKeyCol {
  background-color: transparent !important;
}
.vFormContainer .el-dialog .el-dialog__footer{
    text-align: right;
}

.propertiesTable{
    border: 1px solid #EBEEF5 !important;
    background-color: #FFF !important;
    color: #606266 !important;
}
.propertiesTable .el-table tr>th.is-leaf{
  background-color: #FFF !important;
}
.el-table th,.el-table tr{
  background-color: #FFF !important;
  color: unset !important;
}
.el-table td{
  border-right: 1px solid #EBEEF5 !important;
  border-bottom: 1px solid #EBEEF5 !important;

}
.el-table__fixed-right-patch, .el-table--border::after {
    background-color: transparent;
}
.el-table td, .el-table__fixed-right-patch, .el-table--border th {
    border-bottom: 1px solid #EBEEF5;
    border-right: 1px solid #EBEEF5;
}
.propertiesTable .el-table--border::after{
  background-color: unset;
}
.propertiesTable .el-table__header-wrapper{
  border-bottom: 1px solid #EBEEF5;
}
.el-table th.is-leaf{
  border-bottom: 1px solid #EBEEF5;
}
.vjmapgis-ctrl-group input[type="checkbox"]:checked {
    background-color: rgba(0,0,0,0.15) !important;
}
.vjmapgis-ctrl-group input[type="checkbox"]{
    border-top: 1px solid #ddd;
    border-bottom: unset;
}
</style>
<style scoped>
</style>
